class Enlarge
{
    constructor(el,options={yanse:'yellow'})
    {
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        this.djqh=this.el.querySelectorAll('ul li')
        this.options=options
        this.kaishi()
    }
    
    kaishi() {
        this.ys()
        this.yiru()
        this.kuangao()
        this.yidong()
        this.qietu()
    }
    ys() {
        this.maskObj.style.background = this.options.yanse
    }
    beijingtongbu(left, top)
    {
        let enlargeW = parseFloat(this.getStyle(this.enlargeObj, 'width'))
        let enlargeH = parseFloat(this.getStyle(this.enlargeObj, 'height'))
        let maskW = parseInt(this.getStyle(this.maskObj, 'width'))
        let maskH = parseInt(this.getStyle(this.maskObj, 'height'))
        let x = (enlargeW/maskW) * left
        let y = (enlargeH/maskH) * top
        this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`
    }

    yidong() 
    {
        this.imgObj.onmousemove = (evt) => { 
            let e = evt || window.event
            let left = e.pageX - this.imgObj.parentNode.offsetLeft - this.maskObj.offsetWidth/2
            let top = e.pageY - this.imgObj.parentNode.offsetTop - this.maskObj.offsetHeight/2
            if (left<0) left = 0
            if (top<0) top = 0
            let maxLeft = this.imgObj.offsetWidth - this.maskObj.offsetWidth
            let maxTop = this.imgObj.offsetHeight - this.maskObj.offsetHeight
            if (left>maxLeft) left = maxLeft
            if (top>maxTop) top = maxTop
            this.maskObj.style.left = left + 'px'
            this.maskObj.style.top = top + 'px'
            this.beijingtongbu(left, top)
        }
    }
    yiru(){
        this.imgObj.onmouseover=()=>{
            this.maskObj.style.display=this.enlargeObj.style.display='block'
        }
        this.imgObj.onmouseout=()=>{
            this.maskObj.style.display=this.enlargeObj.style.display='none'
        }
    }
    getStyle(tagObj, attrName) 
    {
        if (window.getComputedStyle)
        {
            return window.getComputedStyle(tagObj)[attrName]
        } else {
            return tagObj.currentStyle[attrName] 
        }
    }
    kuangao()
    {
        let maskW = parseInt(this.getStyle(this.maskObj, 'width'))
        let maskH = parseInt(this.getStyle(this.maskObj, 'height'))
        let enlarge = this.getStyle(this.enlargeObj, 'background-size')
        let enlargeW = parseInt( enlarge.split(' ')[0])
        let enlargeH = parseInt( enlarge.split(' ')[1])
        let imgW = this.imgObj.clientWidth
        let imgH = this.imgObj.clientWidth
        this.enlargeObj.style.width = maskW * (enlargeW / imgW) + 'px'
        this.enlargeObj.style.height = maskH * (enlargeH / imgH)  + 'px'
    }
    qietu()
    {
        this.djqh.forEach((item,i)=>{
            item.onclick=()=>{
                this.el.querySelector('ul li.active').className=''
                item.className='active'
                this.imgObj.style.background=`url(./imgs/${i+1}.jpg)`
                this.enlargeObj.style.background=`url(./imgs/${i+1}.big.jpg)`
            }
        })
        
    }
}